/* ************************************************************* ruler ( px ) */
function fn_drawRuler_row() {
	var placeRow = document.getElementById("placeRow");

	for (var row = 0; row < 31; row++) {
		var div = document.createElement("div");
		div.className = "ruler_row_R";
		placeRow.appendChild(div);
	}

	for (row = 0; row < 640; row++) {
		var div = document.createElement("div");
		var span = document.createElement("span");
		span.className = "gridNum";
		div.appendChild(span);
		if (row % 100 == 0) {
			div.className = "ruler_row_R100";
			span.appendChild(document.createTextNode(row));
		} else if (row % 20 == 0) {
			div.className = "ruler_row_R20";
		} else if (row % 10 == 0) {
			div.className = "ruler_row_R10";
		} else {
			div.className = "ruler_row_R";
		}
		placeRow.appendChild(div);
	}
}

function fn_drawRuler_col() {
	var placeCol = document.getElementById("placeCol");

	for (var col = 1; col < 640; col++) {
		var div = document.createElement("div");
		var span = document.createElement("span");
		span.className = "gridNum";
		div.appendChild(span);
		if (col % 100 == 0) {
			div.className = "ruler_col_B100";
			span.appendChild(document.createTextNode(col));
		} else if (col % 20 == 0) {
			div.className = "ruler_col_B20";
		} else if (col % 10 == 0) {
			div.className = "ruler_col_B10";
		} else {
			div.className = "ruler_col_B";
		}
		placeCol.appendChild(div);
	}

}

/* ************************************************************* ruler ( cm ) */
var cm = 38;
function fn_drawRuler_row_cm() {
	var placeRow = document.getElementById("placeRow");

	for (var row = 0; row < 31; row++) {
		var div = document.createElement("div");
		div.className = "ruler_row_R";
		placeRow.appendChild(div);
	}

	for (row = 0; row < 700; row++) {
		var row_txt = row - 5;

		var div = document.createElement("div");
		var span = document.createElement("span");
		span.className = "gridNum";
		div.appendChild(span);
		if (row % (cm * 5) == 0) {
			div.className = "ruler_row_R100";
			span.appendChild(document.createTextNode(row / 38 + "cm"));
		} else if (row % cm == 0) {
			div.className = "ruler_row_R20";
		} else if (row % (cm / 2) == 0) {
			div.className = "ruler_row_R10";
		} else {
			div.className = "ruler_row_R";
		}
		placeRow.appendChild(div);
	}
}

function fn_drawRuler_col_cm() {
	var placeCol = document.getElementById("placeCol");

	for (var col = 1; col < 600; col++) {
		var col_text = col - 5;
		var div = document.createElement("div");
		var span = document.createElement("span");
		span.className = "gridNum";
		div.appendChild(span);
		if (col % (cm * 5) == 0) {
			div.className = "ruler_col_B100";
		} else if (col_text % (cm * 5) == 0) {
			div.className = "ruler_col_B";
			span.appendChild(document.createTextNode(col_text / 38 + "cm"));
		} else if (col % cm == 0) {
			div.className = "ruler_col_B20";
		} else if (col % (cm / 2) == 0) {
			div.className = "ruler_col_B10";
		} else {
			div.className = "ruler_col_B";
		}
		placeCol.appendChild(div);
	}

}